<template>
	<div calls></div>
	<div class="login-container">
		<van-nav-bar
		  title="物林"
		  left-text="首页"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<!-- 输入框 -->
		<div class="login-content">
			<van-form @submit="onLogin">
				<van-field v-model="userVal" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]"/>
				<van-field v-model="passwordVal" type="password" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]"/>
			
			<!-- 自动登录 -->
				<div class="login-auto">
					<van-checkbox v-model="autoVal"  icon-size="16px" checked-color="#07c160" shape="square">自动登录</van-checkbox>
				</div>
			<!-- 登录按钮 -->
				<div class="login-btn">
					<van-button to="/user"  block type="info" native-type="submit" color="#000">登&nbsp;录</van-button>
				</div>
			</van-form>
			<!-- 协议 -->
			<div class="agreement">登录即表示您同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私政策</a></div>
			
			<!-- 跳转注册 -->
			<van-button @click="toregister"  hairline size="mini" type="primary" >无登录帐号,请注册&nbsp;&gt;</van-button>
		</div>
	
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				userVal : '',
				passwordVal : '',
				autoVal : '',
				square : 'true'
			}
		},
		
		methods:{
			onClickLeft(){
				//console.log('点击了');
				this.$router.push('/');
			},
			
			onLogin(val){
				 console.log('on', val);
			},
			toregister(){
				this.$router.push('/register');
			}
		},
	}
</script>

<style scoped lang="less">
	.login-content{
		padding: 30px 12px;
		text-align: center;
		
		.login-auto{
			font-size: 14px;
			padding-left: 16px;
			margin: 20px 0px 40px
		}
		.login-btn{
			padding: 0px 16px;
		}
		.agreement{
			padding: 16px 16px;
			font-size: 13px;
			color:#333;
			margin-bottom: 28px;
			a{
				color:#07c160;
			}
		}
	}
</style>
